PROJECTENGRAM

JQUERY

JQuery

Tags: #◇Web Development #◇CCAPDEV #◇JQuery #◇Code Snippets #◇M3


◇Overview

Extracted notes for JQuery covering both theoretical and practical elements.

◇Key Definitions

JQuery Lightweight but feature-rich JavaScript library Designed to simplify HTML DOM manipulation Accessing an element can be done through CSS Selector rules Provides an easier way to attach callbacks/event handlers “Write Less, Do More”
JavaScript vs JQuery Setting Text Content document.getElementById(“p1”).innerText = “Hello World”; vs $(“#p1”).text(“Hello World!”);
Further Reading Bubbling vs Capturing (Events Order) https://www.w3.org/TR/DOM-Level-3-Events/#event-flow https://www.quirksmode.org/js/events_order.html#link4 Event interface https://developer.mozilla.org/en-US/docs/Web/API/Event Event Creation https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

◇Code Implementation

『』
TEXT
Adding JQuery
Import via CDN (Content-Delivery Network)
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
or, import locally:
Download from https://code.jquery.com/jquery-3.6.0.min.js, then:
<script src=“[filepath]"></script>
『』
TEXT
Adding JQuery
<script>
$(document).ready(function(){
// your code here
});
</script>
$(document).ready ... is used to prevent jQuery code from running before the document is ready.
『』
TEXT
JavaScript vs JQuery
Finding HTML Element by Id
var x = document.getElementById(“menu”);
vs
var x = $(“#menu”);
『』
TEXT
JavaScript vs JQuery
Finding HTML Elements by Tag Name
var x = document.getElementsByTagName(“p”);
vs
var x = $(“p”);
『』
TEXT
JavaScript vs JQuery
Finding HTML Elements by Class Name
var x = document.getElementsByClassName(“post”);
vs
var x = $(“.post”);

◇Syntax Breakdown

Ensure correct syntax for JQuery Pay attention to specific functions and declarations.

◇Complexity Analysis

Time Complexity: O(1) for typical operations unless looping. Space Complexity: O(1) generally.

◇References & Navigation

CONFIRMATION // 理解度の確認

ACTIVE RECALL VERIFICATION

Select an answer to verify conceptual comprehension and reveal the technical rationale.

Q1

What is the primary purpose of the $(document).ready(function(){...}); syntax in jQuery?

Q2

How do you select an HTML element with the id "menu" using jQuery?

Q3

Which of the following best describes jQuery compared to vanilla JavaScript?